page {
  --main-color: #25A3FF;
  --main-shadow: 0 0 20rpx 3rpx #00000010;
  
  background-color: #f7f7f7;
  font-size: 27rpx;
}

.fix{
  position: fixed;
}
.relative{
  position: relative;
}
.line, .flex{
  display: flex;
}
.flex-column {
  display: flex;
  flex-direction: column;
}
.j_b{
  justify-content: space-between;
}
.j_c{
  justify-content: center;
}
.j_e{
  justify-content: space-evenly;
}
.a_c{
  align-items: center;
}
.f_c{
  flex-direction: column;
}
.gap {
  gap: 12rpx;
}

.wordhidden{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

.back{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 60vh;
  background: linear-gradient(to bottom, var(--main-color), #f4f4f4);
  z-index: -1;
}

.box{
  margin: 24rpx;
  padding: 24rpx;
  border-radius: 18rpx;
  background-color: white;
}

.tag{
  font-weight: 500;
  padding: 3rpx 6rpx;
  border-radius: 6rpx;
  transition: 300ms;
  font-size: 18rpx;
  line-height: 1em;
  display: inline-block;
  color: var(--tag-color);
  border: 3rpx solid var(--tag-color);
  &.success{
    --tag-color: #00bd00;
  }
  &.primary{
    --tag-color: #25A3FF;
  }
  &.warn{
    --tag-color: #d57011;
  }
  &.danger{
    --tag-color: #d51111;
  }
  &.default{
    --tag-color: #808080;
  }
}

.check{
  width: 24rpx;
  height: 24rpx;
  border-radius: 9rpx;
  border: 5rpx solid #eeeeee;
  margin-right: 18rpx;
  transition: 300ms;
  &.round {
    border-radius: 120rpx;
  }
  &.active{
    background-color: var(--main-color);
    border: 5rpx solid var(--main-color);
  }
}

.default_font{
  font-family:Monospaced Number,Chinese Quote,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif!important;
}

.page-tail{
  height: 240rpx;
  width: 750rpx;
}